<template>
  <div>
    <div class="content mb50">
      <div class="p15 bgf bdb">
        <div class="select-m">选择配送方式</div>
        <ul class="select-tab">
          <li :class="{'active':send==0}" @click="send=0">送货上门</li>
          <li :class="{'active':send==1}" @click="send=1">到店自提</li>
        </ul>
      </div>
      <!--送货上门-->
      <div class="order-con">
        <!--送货-->


        <div v-if="send==0">
          <!--无地址-->
          <!--<div class="select_address bgf ">-->
          <!--<img src="./images/add-adress-icon.svg" class="add-icon">添加收货地址-->
          <!--</div>-->
          <!--有地址-->
          <div class="p15 clearfix bgf bg-right-arrow" @click="isShowAddr=true">
            <div class="fl pos-icon">
              <img src="./images/no-adress.svg">
            </div>
            <div class="addr-desc">
              <div class="addr-t">
                <div class="fl">收货人：王百川</div>
                <div class="fr">13898776789</div>
              </div>
              <div class="addr-c">安徽省合肥市蜀山区望江西路温馨家园111</div>
            </div>
          </div>
        </div>

        <!--到店自提-->
        <div v-if="send==1">


          <div class="clearfix p15 my-13-22 bgf  bdb">
            <div class="fl">收货人：王百川</div>
          </div>
          <div class="clearfix p15 my-13-22 bgf  bdb">
            <div class="fl">联系方式：188 9809 9987</div>
          </div>
          <div class="clearfix p15 my-13-22 bgf  bdb">
            <div class="fl">自提门店 <span class="small">（离我最近）</span></div>
            <div class="fr">
              <b class="red" @click="isShowSjList=true">查看所有门店（共12家）</b>
            </div>
          </div>
          <div class="clearfix p15 my-13-22 bgf  bdb">
            <div class="clearfix">
              <div class="fl">政务区店</div>
              <div class="fr">
                <b class="red">距离：1.18km</b>
              </div>
            </div>
            <div class="addr-c">政务区潜山路与龙泉路交口绿地蓝海B座一楼</div>
          </div>
        </div>

        <div class="select-m p15-10">商品列表</div>
        <ul class="goods-list">
          <li>
            <img class="goods-img" src="./images/pro1.png">
            <div class="goods-info">
              <div class="goods-title">53°茅台王子酒500ml</div>
              <div class="goods-bottom">
                <span class="fl price">¥118/瓶</span> <span class="fr">x 1</span>
              </div>
            </div>
          </li>
          <li>
            <img class="goods-img" src="./images/pro1.png">
            <div class="goods-info">
              <div class="goods-title">53°茅台王子酒500ml</div>
              <div class="goods-bottom">
                <span class="fl price">¥118/瓶</span> <span class="fr">x 1</span>
              </div>
            </div>
          </li>
        </ul>
        <div class="clearfix p15 my-13-22 bgf mt10 bdb" @click="isShowCoupon=true">
          <div class="fl">优惠券</div>
          <div class="fr">
            <b class="red">15元</b><img src="./images/gengd-icon.svg" class="vm">
          </div>
        </div>

        <div class="p15 my-13-22 bgf">
          <div>买家留言：</div>
          <textarea name="" id="" cols="30" rows="6" class="buymsg"></textarea>
        </div>
      </div>

    </div>
    <!--商家列表-->
    <transition name="slideup">
      <div class="pop-win" v-if="isShowSjList">
        <div class="sj-list-wrap">
          <ul class="sj-list">
            <li @click="selectSales">
              <div class="clearfix">
                <p class="fl"><span class="nearly">【最近】</span><span class="f3-15">政务区店:0551-64418885</span></p>
              </div>
              <div class="addr-c">政务区潜山路与龙泉路交口绿地蓝海B座一楼</div>
            </li>
            <li>
              <div class="clearfix">
                <p class="fl"><span class="f3-15">政务区店:0551-64418885</span></p>
                <p class="fr"><span class="jl">1.13km</span></p>
              </div>
              <div class="addr-c">政务区潜山路与龙泉路交口绿地蓝海B座一楼</div>
            </li>
            <li>
              <div class="clearfix">
                <p class="fl"><span class="f3-15">政务区店:0551-64418885</span></p>
                <p class="fr"><span class="jl">1.13km</span></p>
              </div>
              <div class="addr-c">政务区潜山路与龙泉路交口绿地蓝海B座一楼</div>
            </li>
          </ul>
        </div>
      </div>
    </transition>
    <div class="jiesuan">
      <div class="js-m">
        <p class="sum"><span>优惠：<b>10.00元</b></span> <span class="ml20">合计：<b>1999元</b></span></p>
      </div>
      <div class="js-r">提交订单</div>
    </div>
    <v-coupon :isShowCoupon="isShowCoupon"></v-coupon>
    <v-selectaddr :isShowAddr="isShowAddr" ></v-selectaddr>
  </div>

</template>

<script>
  import coupon from '@/components/shopcar/selectcoupon'
  import selectAddr from '@/components/shopcar/select_address'

  export default {
    components: {
      'v-coupon': coupon,
      'v-selectaddr': selectAddr,
    },
    data(){
      return {
        send: 0,
        isShowSjList: false,
        isShowCoupon: false,
        isShowAddr: false,
      };
    },
    mounted(){

    },
    methods: {
      selectSales(){
        this.isShowSjList = false
      },
      closeCouponWrap(){
          this.isShowCoupon = false
      }
    }
  }
</script>


<style scoped>
  .content{
    text-align: left;
  }
  .p15{
    padding:.75rem;
  }
  .p15-10{ padding:.5rem .75rem; }
  .bgf{ background:#fff; }
  .bdb{ border-bottom:1px solid #f7f7f7; }
  .select-m{
    font-size:.75rem;
    color:#555555;
  }
  .select-tab{
    padding:.8rem .8rem 0;
    text-align:center;
  }
  .select-tab li{
    display:inline-block;
    width:40%;
    font-size:.7rem;
    padding:.3rem .6rem;
    border:1px solid #d7d7d7;
    border-radius:1rem;
  }
  .select-tab li:first-child{
    margin-right:1rem;
  }
  .select-tab li.active{
    background:#e93b3d;
    color:#fff;
    border:1px solid #e93b3d;
  }
  .select_address{
    padding:1rem .75rem;
    font-size:.75rem;
    color:#555555;
    line-height:1rem;
    background:#fff url(images/gengd-icon.svg) right .75rem center no-repeat;
  }
  .add-icon{
    width:1rem;
    vertical-align:middle;
    margin-right:.5rem;
  }
  .goods-list li{
    background:#fff;
    padding:.5rem .75rem;
    overflow:hidden;
    border-bottom:1px solid #f7f7f7;
  }
  .goods-img{
    width:3.6rem;
    height:3.6rem;
    float:left;
    margin-right:.5rem;
  }
  .goods-title{
    font-size:15px;
    color:#333333;
  }
  .goods-info{
    overflow:hidden;
    height:3.6rem;
    position:relative;
  }
  .goods-bottom{
    position:absolute;
    left:0;
    bottom:.4rem;
    font-size:.7rem;
    color:#252525;
    width:100%;
  }
  .price{
    font-size:.7rem;
    color:#f74c4e;
  }
  .pos-icon{
    width:1.2rem;
    margin-right:.5rem;
  }
  .pos-icon img{
    width:100%;
  }
  .addr-desc{
    overflow:hidden;
    padding-right:.75rem;
  }
  .addr-t{
    font-size:.7rem;
    color:#333333;
    overflow:hidden;
  }
  .addr-c{
    font-size:.65rem;
    color:#777777;
    margin-top:.3rem;
  }
  .bg-right-arrow{
    background-image:url(images/gengd-icon.svg);
    background-position:right .5rem center;
    background-repeat:no-repeat;
  }
  .my-13-22{
    font-size:.65rem;
    color:#222222;
  }
  .buymsg{
    border:0;
    display:block;
    background:#f8f8f8;
    border-radius:4px;
    width:100%;
    margin-top:.5rem;
  }
  .bdb{ border-bottom:1px solid #f7f7f7 }
  .mt10{ margin-top:.5rem; }
  .jiesuan{
    width:100%;
    height:2.5rem;
    position:absolute;
    left:0;
    bottom:0;
    background:#fff;
    display:table;
    box-shadow:0 -1px 3px rgba(0, 0, 0, .1);
  }
  .mb-50{ margin-bottom:2.5rem; }
  .js-m{
    width:75%;
    display:table-cell;
    vertical-align:middle;
    text-align:left;
    padding-left:.75rem;
  }
  .js-r{
    width:25%;
    display:table-cell;
    vertical-align:middle;
    background:#f23030;
    height:100%;
    text-align:center;
    font-size:.75rem;
    color:#ffffff;;
  }
  .sum{
    font-size:.75rem;
    color:#222;
  }
  .sum b{
    font-size:.75rem;
    color:#f23030;
  }
  .ml5{ margin-left:.25rem; }
  .ml20{ margin-left:1rem; }
  b.red, span.red, .red{ color:#f23030; }
  .vm{ vertical-align:middle; }
  .small{
    font-size:.5rem;
    color:#252525;
  }
  .slideup-enter-active, .slideup-leave-active{
    transition:all .3s
  }
  .slideup-enter, .slideup-leave-to{
    transform:translateY(100%);
    opacity:0;
  }
  .pop-win{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    bottom:0;
    z-index:100;
    background-color:rgba(0, 0, 0, .4);
    transition:all .4s;
  }
  .sj-list-wrap{
    width:90%;
    height:70%;
    position:absolute;
    top:15%;
    left:5%;
    background-color:#fff;
    border-radius:5px;
    overflow-x:hidden;
    overflow-y:auto;
  }
  .sj-list{
    padding:0 .75rem;
  }
  .sj-list li{
    padding:.75rem 0;
    border-bottom:1px solid #f7f7f7;
    text-align:left;
  }
  .f3-15{
    color:#333;
    font-size:.75rem;
  }
  .jl{
    font-size:.65rem;
    color:#777777;
  }
  .nearly{
    font-size:.65rem;
    color:#f46058;
  }
</style>
